<template>
  <f7-page
    login-screen
    class="no-toolbar"
  >
    <f7-navbar>
      <f7-nav-left>
        <f7-link
          back
          icon-material="arrow_back"
        ></f7-link>
      </f7-nav-left>
      <f7-nav-title>
        身份认证
      </f7-nav-title>
      <f7-nav-right>
      </f7-nav-right>
    </f7-navbar>

    <f7-block class="no-padding no-margin">
      <f7-row class="upload-row">
        <f7-col style="padding:10px">
          <span style="font-size: 15px;color: black;">
            根据用户协议对用户进行实名制要求，需要您真实拍摄清晰无水印的证件照片，我们将严格保护您的身份信息安全。
          </span>
        </f7-col>
      </f7-row>

      <f7-block-title>第一步：拍摄身份证头像面</f7-block-title>
      <f7-row>
        <f7-col style="padding: 0px 60px 0px 60px">
          <img
            ref="idCardImg1"
            src="../../assets/img/face/idcard_01.png"
            style="width: 100%;height: 100%;border-radius: 10px;"
            @click="scanIDCard(true)"
          />
        </f7-col>
      </f7-row>
      <f7-block-title>第二步：拍摄身份证国徽面</f7-block-title>
      <f7-row>
        <f7-col style="padding: 0px 60px 0px 60px">
          <img
            ref="idCardImg2"
            src="../../assets/img/face/idcard_02.png"
            style="width: 100%;height: 100%;border-radius: 10px;"
            @click="scanIDCard(false)"
          />
        </f7-col>
      </f7-row>
      <f7-block-title v-if="idCard || idCardStartDate">识别结果</f7-block-title>
      <f7-list
        inline-labels
        no-hairlines-md
        v-if="idCard || idCardStartDate"
      >
        <f7-list-item>
          <f7-label>姓名</f7-label>
          <f7-input
            type="text"
            readonly
            :value="userName"
          ></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>身份证</f7-label>
          <f7-input
            type="text"
            readonly
            :value="idCard"
          ></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>有效期</f7-label>
          <f7-input
            type="text"
            readonly
            :value="(idCardStartDate||'')+' ~ '+(idCardEndDate||'')"
          ></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label></f7-label>
          <f7-input
            type="text"
            readonly
          ></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label></f7-label>
          <f7-input
            type="text"
            readonly
          ></f7-input>
        </f7-list-item>
      </f7-list>

    </f7-block>
    <f7-button
      @click="next()"
      class="button button-big btn-registerBtn btn-next"
      style="z-index:9999"
    >下一步</f7-button>
  </f7-page>
</template>
<script>
import controller from "../../libs/framework/controller";

export default class instance extends controller {
  onInit() {
    this.context.loginId = this.$params.loginId;
  }
  mixin() {
    return {
      data() {
        return {
          userName: null,
          gender: null,
          address: null,
          birtyday: null,
          nation: null,
          idCard: null,
          idCardStartDate: null,
          idCardEndDate: null,
          idCardImg1: null,
          idCardImg2: null
        };
      },
      methods: {
        scanIDCard(isFont) {
          window.plus.ai.ocr.scanIDCard(
            isFont,
            r => {
              if (r && r.success) {
                if (r.idCardSide == "front") {
                  this.userName = r.userName;
                  this.idCard = r.idCard;
                  this.gender = r.gender;
                  this.address = r.address;
                  this.birtyday = r.birtyday;
                  this.nation = r.nation;
                  this.idCardImg1 = r.idCardImg1;
                  if (this.userName && this.idCard && this.idCardImg1) {
                    this.$f7.dialog.toast("识别成功");
                    this.$$(this.$refs.idCardImg1).attr(
                      "src",
                      "data:image/png;base64," + r.idCardImg1
                    );
                  } else {
                    this.$f7.dialog.alert(
                      r.message || "识别失败，请重新拍摄身份证头像面"
                    );
                  }
                } else {
                  this.idCardStartDate = r.idCardStartDate;
                  this.idCardEndDate = r.idCardEndDate;
                  this.idCardImg2 = r.idCardImg2;
                  if (
                    this.idCardStartDate &&
                    this.idCardEndDate &&
                    this.idCardImg2
                  ) {
                    this.$f7.dialog.toast("识别成功");
                    this.$$(this.$refs.idCardImg2).attr(
                      "src",
                      "data:image/png;base64," + r.idCardImg2
                    );
                  } else {
                    this.$f7.dialog.alert(
                      r.message || "识别失败，请重新拍摄身份证头像面"
                    );
                  }
                }
              } else if (r.message == "用户取消") {
                this.$f7.dialog.toast(r.message);
              } else {
                this.$f7.dialog.alert(r.message || "识别失败，请稍后重试");
              }
            },
            e => {
              this.$f7.dialog.alert(r.message || "识别失败，请稍后重试");
            }
          );
        },
        next() {
          if (this.userName && this.address && this.idCard) {
            plus.storage.removeItem("face_temp_model");
            plus.storage.setItem(
              "face_temp_model",
              JSON.stringify({
                userId: this.super.$params.userId,
                faceUserId: this.super.$params.faceUserId,
                userName: this.userName,
                gender: this.gender,
                address: this.address,
                birtyday: this.birtyday,
                nation: this.nation,
                idCard: this.idCard,
                idCardStartDate: this.idCardStartDate,
                idCardEndDate: this.idCardEndDate,
                idCardImg1: this.idCardImg1,
                idCardImg2: this.idCardImg2
              })
            );
            this.$f7.views.current.router.navigate(
              "/account/face/?userId={0}&faceUserId={1}&userName={2}".format(
                this.super.$params.userId,
                this.super.$params.faceUserId,
                this.userName
              )
            );
          } else {
            this.$f7.dialog.alert("请拍摄身份证认证后再进行下一步");
          }
        }
      }
    };
  }
}
</script>
<style scoped>
.upload-row {
  border-bottom: 2px dashed #adaaaa;
  background: #efefef94;
}
.upload-img {
  height: 80px;
  padding: 10px 30px;
}
.btn-next {
  position: fixed;
  bottom: 0px;
  width: 100%;
  border-radius: 0px !important;
}
li >>> .item-content {
  min-height: 25px !important;
  height: 25px !important;
}
.list {
  margin: 0 !important;
}
</style>
